<template>
    <div id="newList">
        <div class="container">
            <div class="h2">新闻列表</div>
            <!-- 搜索  -->
            <div class="search-group">
                <input @keyup.enter="search" v-model="kw" type="text" placeholder="请输入你搜索的新闻">
                <div class="find" @click="search">查询</div>
            </div>
            <!-- 新闻列表 -->
            <div class="table_list">
                <table v-if="pager.data.length">
                    <tr>
                        <th>编号</th>
                        <th>封面</th>
                        <th>标题</th>
                        <th>发布时间</th>
                        <th>类别</th>
                    </tr>
                    <tr v-for="item of pager.data" :key="item.nid">
                        <td>{{item.nid}}</td>
                        <td class="image">
                            <img v-if="!/^http:/.test(item.cover)" :src="imgUrl+item.cover">
                            <img v-else :src="item.cover">
                        </td>
                        <td>{{item.title}}</td>
                        <td v-if="item.startime">{{$moment(item.startime,'YYYY/MM/DD').format('YYYY年MM月DD日')}}</td>
                        <td v-else></td>
                        <td>
                            <div class="family" :class="{news:item.fid==2,gonggao:item.fid==3,active:item.fid==4}">{{item.fid | family}}</div>
                        </td>
                    </tr>
                </table>
                <div v-else class="noSearch">没有搜索到相关的内容</div>
            </div>
            <!--  分页 -->
            <div class="pager" v-show="pager.data.length">
                <span :class="{disabled:pager.pno==1}" @click="prevPage">上一页</span>
                <span v-for="p in pager.pageSize" :class="{cur:pager.pno==p}" @click="getData(p,10)" :key="p">{{p}}</span>
                <span :class="{disabled:pager.pno==pager.pageSize}" @click="nextPage">下一页</span>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
    export default {
        data() {
            return {
                kw:'',
                pager:{ //分页器
                    data:[],
                    pno:1
                }
            }
        },
        methods:{
            getData(pno,pageNum){
                const url=`admin/newslist/${pno}/${pageNum}`
                this.axios.get(url)
                    .then(res => {
                        this.pager=res.data
                    })
            },
            prevPage(){
                if (this.pager.pno==1) return
                this.pager.pno--
                this.getData(this.pager.pno,10)
            },
            nextPage(){
                if (this.pager.pno==this.pager.pageSize) return
                this.pager.pno++
                this.getData(this.pager.pno,10)
            },
            search(){
                const url=`admin/news?kw=${this.kw}&pno=${this.pager.pno}`
                this.axios.get(url)
                    .then(res => {
                        this.pager=res.data
                    })
            }
        },
        computed:{
            ...mapState(['imgUrl'])
        },
        mounted(){
            this.getData(this.pager.pno,10)
        },
        filters:{
            family(value){
                return ['','最新','新闻','公告','活动'][value]
            }
        }
    }
</script>

<style lang="scss" scoped>
$text-color:#73879C;
#newList {
    .container {
        margin: 10px 20px;
        .h2 {
            font-size: 1.5em;
            font-family: '微软雅黑';
            color: $text-color;
            padding-bottom: 20px;
            border-bottom: 3px solid #e6e9ed;
        }
        .search-group {
            padding: 20px 0;
            display: flex;
            align-items: center;
            input {
                width: 300px;
                outline: none;
                border: 2px solid #e6e9ed;
                padding: 10px 20px;
                border-radius: 8px;
            }
            .find {
                margin-left: 10px;
                background-color: #1abb9c;
                color: #fff;
                padding: 8px 20px;
                font-size: .9em;
                border-radius: 5px;
                &:hover {
                    cursor: pointer;
                }
                &:active {
                    background-color: darken(#1ABB9C,10%);
                }
            }
        }
        .table_list {
            height: 450px;
            overflow: scroll;
            overflow-x: hidden;
            .noSearch {
                text-align: center;
                color: #ccc;
            }
            // 滚动条
            &::-webkit-scrollbar {
                width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
            }
            &::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
                background-color: #1abb9c;
            }
            &::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
                border-radius: 10px;
                background: #ededed;
            }
        }
        table {
            border-spacing: 0;
            width: 100%;
            tr {
                &:hover {
                    background-color: #f5f7fa;
                }
                th {
                    text-align: left;
                    border-bottom: 2px solid #e6e9ed;
                    padding-top: 5px;
                    color: #9e9399;
                    font-size: .9em;
                    padding-bottom: 10px;
                    font-family: '微软雅黑';
                }
                td {
                    color: #7387a4;
                    font-size: .9em;
                    border-bottom: 1px solid #E6E9ED;
                    img {
                        width: 100px;
                        max-width: 100%;
                    }
                    .family {
                        border: 1px solid #000;
                        padding: 5px;
                        width: 50px;
                        text-align: center;
                        border-radius: 5px;
                        &.news {
                            color: #ff3636;
                            border-color: #ff3636;
                        }
                        &.active {
                            border-color: #f4be19;
                            color: #f4be19;
                        }
                        &.gonggao {
                            color: #1e96ab;
                            border-color: #1e96ab;
                        }
                    }
                }
            }
        }
        .pager {
            display: flex;
            justify-content: flex-end;
            padding-top: 20px;
            padding-right: 20px;
            span {
                border: 1px solid #ccc;
                padding: 5px 10px;
                display: block;
                color: #1ABB9C;
                &:hover {
                    cursor: pointer;
                }
                &.cur {
                    border: none;
                    background-color: #1abb9c;
                    color: #fff;
                }
                &.disabled {
                    color: #ccc;
                    pointer-events:none;
                }
            }
        }
    }
}
</style>